{% extends 'front/front_base.html' %}
{% from 'common/static.html' import static %}

{% block title %}
    欢迎来到June论坛
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename="front/css/front_index.css") }}">
{% endblock %}
{% block content %}
{#    轮播图#}
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器（底部小圆点） -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <!-- 轮播图片 -->
        <div class="carousel-inner banner-box" role="listbox">
            {% for banner in banners %}
                <div class="item {% if loop.first %}active{% endif %}">
                    <a href="{{ banner.link_url }}"><img
                            src="{{ banner.img_url }}"
                            alt="{{ banner.img_name }}">
                    </a>
                    <div class="carousel-caption"></div>
                </div>
            {% endfor %}
        </div>

        <!-- 左右控制按钮 -->
        <a class="left carousel-control control-button1" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一页</span>
        </a>
        <a class="right carousel-control control-button2" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一页</span>
        </a>
    </div>
{#    左边大区域#}
    <div class="lg-container">
        <div>
{#          过滤条件#}
            <ul class="nav nav-pills filter-header">
              <li role="presentation" class="{% if current_sort == 1 %}active{% endif %}"><a href="{{ url_for('front.index',bd=current_board,sort=1) }}">最新</a></li>
              <li role="presentation" class="{% if current_sort == 2 %}active{% endif %}"><a href="{{ url_for('front.index',bd=current_board,sort=2) }}">精华帖子</a></li>
              <li role="presentation" class="{% if current_sort == 3 %}active{% endif %}"><a href="{{ url_for('front.index',bd=current_board,sort=3) }}">点赞最多</a></li>
              <li role="presentation" class="{% if current_sort == 4 %}active{% endif %}"><a href="{{ url_for('front.index',bd=current_board,sort=4) }}">评论最多</a></li>
            </ul>
{#            帖子列表#}
            {% for article in articles %}
            <div class="list-group">
                <a href="{{ url_for('front.article_detail',article_id=article.id) }}" class="list-group-item article-info">
                    <img src="{{ article.author.avatar }}" alt="" class="left-avatar">
                    <span class="right-text">
                        {% if article.highlight %}
                        <span class="h4">{{ article.article_title }}</span><span class="label label-danger">精华帖子</span><br><br>
                        {% else %}
                        <span class="h4">{{ article.article_title }}</span><br><br>
                        {% endif %}
                        <span class="article-desc">
                            <span>作者：{{ article.author.username }}</span>
                            <span>发表时间：{{ article.add_time }}</span>
                            <span>评论：0</span>
                            <span>阅读：0</span>
                        </span>
                    </span>
                </a>
            </div>
            {% endfor %}
        </div>
        {{ pagination.links }}
    </div>
{#    右边小区域#}
    <div class="sm-container">
{#         板块#}
        <div class="text-center">
            <div class="list-group">
                <a class="center-block list-group-item" id="public-article-btn" href="{{ url_for('front.add_article') }}">发布帖子</a>
            </div>
            <div class="list-group">
                <a class="list-group-item {% if not current_board %}active{% endif %}" href="{{ url_for('front.index') }}">所有板块</a>
                {% for board in boards %}
                  <a href="{{ url_for('front.index',bd=board.id) }}" class="list-group-item {% if board.id==current_board %}active{% endif %}">
                    {{ board.board_name }}
                  </a>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
